<template>
<div>
    <el-button type="primary" @click="dialogVisible = true">增加</el-button>
  <el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose">
  <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="姓名" prop="studentName">
    <el-input v-model="ruleForm.studentName"></el-input>
  </el-form-item>
  <el-form-item label="年龄" prop="age">
    <el-input v-model.number="ruleForm.age" ></el-input>
  </el-form-item>
  <el-form-item label="性别" >
    <el-radio-group v-model="ruleForm.gender">
    <el-radio label="男">男</el-radio>
    <el-radio label="女">女</el-radio>
  </el-radio-group>
  </el-form-item>
  <el-form-item label="上传头像">
   <el-upload
  class="avatar-uploader"
  action="/api/upload"
  :show-file-list="false"
  :on-success="handleAvatarSuccess"
  :before-upload="beforeAvatarUpload">
  {{imageUrl}}
  <img v-if="imageUrl" :src="'http://localhost:8080/upload/'+imageUrl" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
  </el-form-item>
  
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
    <el-button @click="dialogVisible = false">取消</el-button>
  </el-form-item>
</el-form>
</el-dialog>
</div>
</template>

<script>
import {addStudent} from '../../service'
import {mapActions} from 'vuex'
export default {
    data(){
        return{
          imageUrl:'',
            dialogVisible:false,
            ruleForm: {
                studentName: '',
                age: '',
                gender: ''
            },
        rules: {
          studentName: [
            { required:true, trigger: 'blur' }
          ],
          age: [
            { required:true, trigger: 'blur'}
          ]
        }
        }
    },
    methods:{
      handleAvatarSuccess(res, file) {
        this.imageUrl = res;
      },
        submitForm(formName) {
        this.$refs[formName].validate(async (valid) => {
          if (valid) {
            await addStudent(this.ruleForm);
            this.dialogVisible = false;
            // this.$emit('show');
            this.show();
          } else {
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      ...mapActions("student",["show"])
    }
}
</script>

<style>
  .avatar{
    width:100px;
    height:100px;
  }
</style>